<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>Zapatec DHTML Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" media="all" href="../themes/winxp.css" title="winxp" >
		<link href="../doc/css/zpcal.css" rel="stylesheet" type="text/css">
		<link href="../doc/css/template.css" rel="stylesheet" type="text/css">
		<link rel="SHORTCUT ICON" href="./favicon.ico">


				<!-- import the calendar script -->
				<script type="text/javascript" src="../src/utils.js"></script>
				<script type="text/javascript" src="../src/calendar.js"></script>

				<!-- import the language module -->
				<script type="text/javascript" src="../lang/calendar-en.js"></script>

				<!-- other languages might be available in the lang directory; please check
				your distribution archive. -->

				<!-- import the calendar setup script -->
				<script type="text/javascript" src="../src/calendar-setup.js"></script>
			</head>
			<body>
				<div class="topMenuHeader">
					<div class="logo">
						<a href='http://www.zapatec.com'><img src='../doc/images/logoNew.gif' alt='Zapatec logo' border='0'></a>
					</div>
				</div>

			<a href='example1.html' style='float:left; margin-left:2em'> <img border='0' src='previous.gif' alt='previous Javascript Calendar Example'></a>
			<a href='example2.html' style='float:right; margin-right:2em'><img border='0' src='next.gif' alt='previous Javascript Calendar Example'></a>
<div class='zpCalSubheader' style='text-align:center'> Two Coordinated Dates</div>
<div class='zpCalDemoText'>


	This example simulates choosing <strong> check-in</strong> and <strong> check-out </strong> 
	dates for a hotel reservation.

	<ol>
		<li> Click on a button. </li>
		<li> Notice that you cannot choose days prior to today. </li>
		<li> You cannot choose a check in date later then the check out date. </li>
		<li> You cannot choose a check out date prior to the check in date. </li>
		<li> Clicking reset will clear the dates. </li>
		<li> The second calendar default date is the date chosen in the first calendar. This matters
		when the check in days is several months in the future so the user doesn't need to scroll twice</li>
	</ol>

</div>

	<form name="form1" action="#" method="POST" onReset='resetDates()'> 
		<table>
			<tr>
				<td class='zpCalSubheader'> 
					Location: 
				</td>
				<td>
					<input type="text" name="location" id="location" />
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-in Date:
				</td>
				<td>
					<input type="text" name="date8a" id="departure_date" />
					<input type="reset" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-out Date:
				</td>
				<td>
					<input type="text" name="date8b" id="arrivalDate" />
					<input type="reset" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="Submit2" value="Check" class="button" onFocus="if(this.blur)this.blur()">
				</td>
				<td>

					<input type="reset" name="Submit22" value="Reset" class="button" onFocus="if(this.blur)this.blur()"> 
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		<!--  to hide script contents from old browsers
		var startDate;
		var endDate;
		var ONEDAY = 3600 * 24;

		function resetDates() {
			startDate = endDate = null;
		}



		/*
		* This functions return true to disallow a date
		* and false to allow it.
		*/



		Zapatec.Calendar.setup({
			inputField     :    "departure_date",   // id of the input field
			button         :    "button8a",  // What will trigger the popup of the calendar
			ifFormat       :    "%b %d, %Y",       // format of the input field: Mar 18, 2005
			showsTime      :     false,          //no time
			saveDate       :    2
		});

		Zapatec.Calendar.setup({
			inputField     :    "arrivalDate",
			button         :    "button8b",  // What will trigger the popup of the calendar
			ifFormat       :    "%b %d, %Y",       // format of the input field: Mar 18, 2005
			showsTime      :     false,          //no time
			saveDate       :    1
		});
		// end hiding contents from old browsers  -->
	</script>
	<noscript>
		This page uses a <a href='http://www.zapatec.com/website/main/products/prod1/'> Javascript Calendar </a>, but
		your browser does not support Javascript. 
		<br/>
		Either enable Javascript in your Browser or upgrade to
		a newer version.
	</noscript>

	<div class="footer" style='text-align:center; margin-top:2em'>
		<br/>
		&copy; 2004 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
	</div>

</body>
</html>
